<template>
	<div class="quarter-cls">
		<mark class="_mark" v-show="showSeason" @click.stop="showSeason = false"></mark>
		<el-input placeholder="请选择上半年/下半年" v-model="showValue" size="small" style="width:100%" @focus="showSeason = true"
		 :disabled="disabled">
			<i slot="prefix" class="el-input__icon el-icon-date"></i>
		</el-input>
		<el-card class="box-card" v-show="showSeason">
			<div slot="header" class="clearfix yearBtn">
				<button type="button" aria-label="前一年" class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
				 @click="prev"></button>
				<span role="button" class="el-date-picker__header-label">{{ year }}年</span>
				<button type="button" aria-label="后一年" class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
				 @click="next"></button>
			</div>
			<div class="text item">
				<el-button type="text" size="medium" class="_left" @click="selectSeason(0)" :disabled="disabled0">上半年</el-button>
				<el-button type="text" size="medium" class="_right" @click="selectSeason(1)" :disabled="disabled1">下半年</el-button>
			</div>
			<!-- <div class="text item">
        <el-button
          type="text"
          size="medium"
          class="_left"
          @click="selectSeason(2)"
          :disabled="disabled2"
          >第三季度</el-button
        >
        <el-button
          type="text"
          size="medium"
          class="_right"
          @click="selectSeason(3)"
          :disabled="disabled3"
          >第四季度</el-button
        >
      </div> -->
		</el-card>
	</div>
</template>

<script>
	export default {
		name: "Halfear",
		props: {
			valueArr: {
				default: () => {
					return ["01-03", "04-06", "07-09", "10-12"];
				},
				type: Array
			},
			getValue: {
				default: () => {},
				type: Function
			},
			defaultValue: {
				type: String,
				default: ""
			},
			disabled: "",
			villageForm: {
				default: () => {
					return {};
				},
				type: Object
			}
		},
		data() {
			return {
				showSeason: true,
				season: "",
				year: new Date().getFullYear(),
				showValue: "",
				disabled0: false,
				disabled1: false,
				disabled2: false,
				disabled3: false
			};
		},
		// created() {
		//   if (this.defaultValue) {
		//     let value = this.defaultValue;
		//     let arr = value.split("-");
		//     this.year = arr[0].slice(0, 4);
		//     let str = arr[0].slice(4, 6) + "-" + arr[1].slice(4, 6);
		//     let arrAll = this.valueArr;
		//     this.showValue = `${this.year}年${arrAll.indexOf(str) + 1}季度`;
		//   }
		//   if (this.villageForm) {
		//     if (
		//       this.villageForm.pubBizInterval &&
		//       this.villageForm.pubBizInterval.substring(5, 7) == "04" &&
		//       this.villageForm.pubBizInterval.substring(8, 10) == "15"
		//     ) {
		//       this.showValue =
		//         this.villageForm.pubBizInterval.substring(0, 4) + "第一季度";
		//     } else if (
		//       this.villageForm.pubBizInterval &&
		//       this.villageForm.pubBizInterval.substring(5, 7) == "07" &&
		//       this.villageForm.pubBizInterval.substring(8, 10) == "15"
		//     ) {
		//       this.showValue =
		//         this.villageForm.pubBizInterval.substring(0, 4) + "第二季度";
		//     } else if (
		//       this.villageForm.pubBizInterval &&
		//       this.villageForm.pubBizInterval.substring(5, 7) == "10" &&
		//       this.villageForm.pubBizInterval.substring(8, 10) == "15"
		//     ) {
		//       this.showValue =
		//         this.villageForm.pubBizInterval.substring(0, 4) + "第三季度";
		//     } else if (
		//       this.villageForm.pubBizInterval &&
		//       this.villageForm.pubBizInterval.substring(5, 7) == "01" &&
		//       this.villageForm.pubBizInterval.substring(8, 10) == "15"
		//     ) {
		//       this.showValue =
		//         parseInt(this.villageForm.pubBizInterval.substring(0, 4)) -
		//         parseInt(1) +
		//         "第四季度";
		//     }
		//   }
		// },
		// watch: {
		//   defaultValue: function(value) {
		//     let arr = value.split("-");
		//     this.year = arr[0].slice(0, 4);
		//     let str = arr[0].slice(4, 6) + "-" + arr[1].slice(4, 6);
		//     let arrAll = this.valueArr;
		//     this.showValue = `${this.year}年${arrAll.indexOf(str) + 1}季度`;
		//   },
		//   villageForm: function(value) {
		//     if (
		//       value.pubBizInterval.substring(5, 7) == "04" &&
		//       value.pubBizInterval.substring(8, 10) == "15"
		//     ) {
		//       this.showValue = value.pubBizInterval.substring(0, 4) + "第一季度";
		//     } else if (
		//       value.pubBizInterval.substring(5, 7) == "07" &&
		//       value.pubBizInterval.substring(8, 10) == "15"
		//     ) {
		//       this.showValue = value.pubBizInterval.substring(0, 4) + "第二季度";
		//     } else if (
		//       value.pubBizInterval.substring(5, 7) == "10" &&
		//       value.pubBizInterval.substring(8, 10) == "15"
		//     ) {
		//       this.showValue = value.pubBizInterval.substring(0, 4) + "第三季度";
		//     } else if (
		//       value.pubBizInterval.substring(5, 7) == "01" &&
		//       value.pubBizInterval.substring(8, 10) == "15"
		//     ) {
		//       this.showValue =
		//         parseInt(value.pubBizInterval.substring(0, 4)) -
		//         parseInt(1) +
		//         "第四季度";
		//     }
		//   }
		// },
		mounted() {
			this.getYear();
		},
		methods: {
			one() {
				this.showSeason = false;
			},
			prev() {
				this.year = this.year * 1 - 1;
				this.getYear();
			},
			next() {
				this.year = this.year * 1 + 1;
				this.getYear();
			},
			reast() {
				this.showValue = "";
			},
			getYear() {
				console.log(
					1111,
					this.year,
					new Date().getFullYear(),
					new Date().getMonth()
				);
				// if (this.year > new Date().getFullYear()) {
				//   this.disabled0 = true;
				//   this.disabled1 = true;
				//   this.disabled2 = true;
				//   this.disabled3 = true;
				// } else if (this.year == new Date().getFullYear()) {
				//   if (new Date().getMonth() > "03") {
				//     this.disabled0 = false;
				//     this.disabled1 = true;
				//     this.disabled2 = true;
				//     this.disabled3 = true;
				//   } else if (new Date().getMonth() > "06") {
				//     this.disabled0 = false;
				//     this.disabled1 = false;
				//     this.disabled2 = true;
				//     this.disabled3 = true;
				//   } else if (new Date().getMonth() > "09") {
				//     this.disabled0 = false;
				//     this.disabled1 = false;
				//     this.disabled2 = false;
				//     this.disabled3 = true;
				//   } else {
				//     this.disabled0 = true;
				//     this.disabled1 = true;
				//     this.disabled2 = true;
				//     this.disabled3 = true;
				//   }
				// } else {
				//   this.disabled0 = false;
				//   this.disabled1 = false;
				//   this.disabled2 = false;
				//   this.disabled3 = false;
				// }
			},
			selectSeason(i) {
				let that = this;
				that.season = i + 1;
				let arr = that.valueArr[i].split("-");
				that.getValue(that.year + arr[0] + "-" + that.year + arr[1]);
				that.showSeason = false;
				if (this.season == 1) {
					this.showValue = `${this.year}年上半年`; // `${this.year}年第一季度`;
				} else if (this.season == 2) {
					this.showValue = `${this.year}年下半年`; // `${this.year}年第二季度`;
				}
				// else if (this.season == 3) {
				//   this.showValue = `${this.year}年第三季度`;
				// } else if (this.season == 4) {
				//   this.showValue = `${this.year}年第四季度`;
				// }
				that.sendMsg();
			},
			getLastDay(year, month) {
				var new_year = year;
				var new_month = month++;
				if (month > 12) {
					new_month -= 12;
					new_year++;
				}
				var new_date = new Date(new_year, new_month, 1);
				return new Date(new_date.getTime() - 1000 * 60 * 60 * 24).getDate();
			},
			sendMsg() {
				this.$emit("func", this.showValue);
			}
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
	.quarter-cls {
		margin-bottom: 5px;
		width: 75%; //3.02rem;
		min-width: 2.96rem;
		height: 100%;
		box-sizing: border-box;
	}

	._mark {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0);
		z-index: 999;
		width: 200px;
	}

	.el-card.is-always-shadow,
	.el-card.is-hover-shadow:focus,
	.el-card.is-hover-shadow:hover {
		width: 200px;
	}

	.yearBtn {
		text-align: center;
		padding: 0;
	}

	.box-card {
		width: 322px;
		padding: 0 3px 20px;
		margin-top: 10px;
		position: fixed;
		z-index: 9999;
	}

	.el-date-picker__header-label {
		padding: 0 25px;
	}

	.text.item {
		text-align: center;
	}

	/deep/ .el-button {
		width: 40%;
		color: #606266;
	}

	.text.item ._left {
		float: left;
	}

	.text.item ._right {
		float: right;
	}

	::v-deep .el-input--small .el-input__inner {
		height: 41px;
	}
	
	.el-card {
	  background-color: #124694;
	  border: none;
	}
	.el-date-picker__header-label {
	  color: #fff;
	}
	.el-picker-panel__icon-btn {
	  color: #fff;
	}
	
	.el-button {
	  color: #fff;
	}
</style>
